<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人评论</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul>li{
            list-style: none;
        }
        a{
            color: green;
        }
        .box{
            width: 100%;
            height: 1150px;
        }
        .user_type{
            width: 1650px;
            height: 300px;
            margin: 0 20px;
        }
        .layui-col-md11{
            width: 1650px;
        }
        .layui-card-header{
            color: #666B69;
            font-size: medium;
            font-weight: bolder;
            border-bottom: 1px solid #e8e8e8;
            background-color:rgb(243,243,243);
        }
        .layui-card-body{
            height: 70px;
        }
        .layui-btn{
            margin: 5px 2px;
        }
        .layui-btn-lg{
            width: 130px;
            height: 46px;
        }
        .btn_style{
            color: #595458;
            border-color: #e8e8e8;
            background-color: #fff;
        }
        .btn_default{
            color: #fff;
            background-color: #009688;
        }
        .btn_onclick{
            color: #fff;
            background-color: #009688;
        }
        .btn_remove{
            color: #595458;
            background-color: #fff;
        }
        .layui-btn:hover{
            color: #595458;
            border-color: #009688;
        }
        .btn_onclick:hover{
            color: #fff;
        }
        .btn_remove:hover{
            color: #595458;
            border-color: #009688;
        }
        .count_list{
            margin: -44px 20px 0 20px;
            width: 1650px;
        }
        .data_list{
            width: 1650px;
            height: 600px;
            margin: 20px 20px;
        }
        #table_head{
            display: none;
            color: #666B69;
            font-size: medium;
            font-weight: bolder;
        }
        .layui-table-cell{
            height: 60px;
            line-height: 60px;
        }
        .btn_choose{
            margin: 0 0 -15px 35px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="btn_choose">
        <button class="layui-btn layui-btn-lg btn_style btn_default" id="course">课程</button>
        <button class="layui-btn layui-btn-lg btn_style" id="article">文章</button>
        <button class="layui-btn layui-btn-lg btn_style" id="product">商品</button>
    </div>
    <!--用户类型-->
    <div class="layui-row user_type">
        <div class="layui-col-md11">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon">&#xe63c;</i> 用户类型
                </div>
                <div class="layui-card-body">
                    <div>
                        <button class="layui-btn layui-btn-lg btn_style btn_default" id="users">前端用户</button>
                        <button class="layui-btn layui-btn-lg btn_style" id="manager">管理人员</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md11">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon">&#xe63c;</i> 评论类型
                </div>
                <div class="layui-card-body">
                    <div>
                        <button class="layui-btn layui-btn-lg btn_style btn_default" id="allComment">全部评论(<span id="allCommentNum"></span>)</button>
                        <button class="layui-btn layui-btn-lg btn_style" id="normalComment">正常(<span id="normalCommentNum"></span>)</button>
                        <button class="layui-btn layui-btn-lg btn_style" id="interceptComment">已拦截(<span id="interceptCommentNum"></span>)</button>
                        <button class="layui-btn layui-btn-lg btn_style" id="deleteComment">已删除(<span id="deleteCommentNum"></span>)</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--次数列表-->
    <div class="count_list">
        <table id="countTable" lay-filter="countTable"></table>
    </div>
    <!--数据列表-->
    <div class="data_list">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
    <!--表头样式-->
    <div id="table_head">
        <i class="layui-icon">&#xe63c;</i> 数据列表
    </div>
</div>
<script>
    layui.use(['jquery','layer','table'],function () {
        var $=layui.jquery;
        var layer = layui.layer;
        var table=layui.table;
        //按钮样式
        $('.btn_style').on('click',function () {
            $(this).addClass('btn_onclick').siblings().removeClass('btn_onclick');
            $(this).removeClass('btn_remove').siblings().addClass('btn_remove');
        })
        var classify = 0;//classify=0为课程，1为文章，2为商品
        var flag = true;//flag为true，调用前端用户表格，为false调用管理人员表格
        var buttons = 0;//buttons=0为全部，1为正常,2为已拦截，3为已删除
        //页面表格
        clickCourseUserTable('2','1','');
        //按钮点击
        showTable();
        function showTable(){
            //点击课程
            $('#course').on('click',function () {
                classify = 0;
                if(flag && buttons == 0){
                    clickCourseUserTable('2','1','');
                }else if(flag && buttons == 1){
                    clickCourseUserTable('2','1','1');
                }else if(flag && buttons == 2){
                    clickCourseUserTable('2','1','2');
                }else if(flag && buttons == 3){
                    clickCourseUserTable('2','1','3');
                }else if(!flag && buttons == 0){
                    clickCourseTable('2','2','');
                }else if(!flag && buttons == 1){
                    clickCourseTable('2','2','1');
                }else if(!flag && buttons == 2){
                    clickCourseTable('2','2','2');
                }else if(!flag && buttons == 3){
                    clickCourseTable('2','2','3');
                }
            })
            //点击文章
            $('#article').on('click',function () {
                classify = 1;
                if(flag && buttons == 0){
                    clickMicrocircleUserTable('4','1','');
                }else if(flag && buttons == 1){
                    clickMicrocircleUserTable('4','1','1');
                }else if(flag && buttons == 2){
                    clickMicrocircleUserTable('4','1','2');
                }else if(flag && buttons == 3){
                    clickMicrocircleUserTable('4','1','3');
                }else if(!flag && buttons == 0){
                    clickMicrocircleTable('4','2','');
                }else if(!flag && buttons == 1){
                    clickMicrocircleTable('4','2','1');
                }else if(!flag && buttons == 2){
                    clickMicrocircleTable('4','2','2');
                }else if(!flag && buttons == 3){
                    clickMicrocircleTable('4','2','3');
                }
            })
            //点击商品
            $('#product').on('click',function () {
                classify = 2;
                if(flag && buttons == 0){
                    clickProductUserTable('3','1','');
                }else if(flag && buttons == 1){
                    clickProductUserTable('3','1','1');
                }else if(flag && buttons == 2){
                    clickProductUserTable('3','1','2');
                }else if(flag && buttons == 3){
                    clickProductUserTable('3','1','3');
                }else if(!flag && buttons == 0){
                    clickProductTable('3','2','');
                }else if(!flag && buttons == 1){
                    clickProductTable('3','2','1');
                }else if(!flag && buttons == 2){
                    clickProductTable('3','2','2');
                }else if(!flag && buttons == 3){
                    clickProductTable('3','2','3');
                }
            })
            //点击前端用户
            $('#users').on('click',function () {
                flag = true;
                if(classify == 0 && buttons == 0){
                    clickCourseUserTable('2','1','')
                }else if(classify == 0 && buttons == 1){
                    clickCourseUserTable('2','1','1')
                }else if(classify == 0 && buttons == 2){
                    clickCourseUserTable('2','1','2')
                }else if(classify == 0 && buttons == 3){
                    clickCourseUserTable('2','1','3')
                }else if(classify == 1 && buttons == 0){
                    clickMicrocircleUserTable('4','1','')
                }else if(classify == 1 && buttons == 1){
                    clickMicrocircleUserTable('4','1','1')
                }else if(classify == 1 && buttons == 2){
                    clickMicrocircleUserTable('4','1','2')
                }else if(classify == 1 && buttons == 3){
                    clickMicrocircleUserTable('4','1','3')
                }else if(classify == 2 && buttons == 0){
                    clickProductUserTable('3','1','')
                }else if(classify == 2 && buttons == 1){
                    clickProductUserTable('3','1','1')
                }else if(classify == 2 && buttons == 2){
                    clickProductUserTable('3','1','2')
                }else if(classify == 2 && buttons == 3){
                    clickProductUserTable('3','1','3')
                }
            });
            //点击管理人员
            $('#manager').on('click',function () {
                flag = false;
                if(classify == 0 && buttons == 0){
                    clickCourseTable('2','2','')
                }else if(classify == 0 && buttons == 1){
                    clickCourseTable('2','2','1')
                }else if(classify == 0 && buttons == 2){
                    clickCourseTable('2','2','2')
                }else if(classify == 0 && buttons == 3){
                    clickCourseTable('2','2','3')
                }else if(classify == 1 && buttons == 0){
                    clickMicrocircleTable('4','2','')
                }else if(classify == 1 && buttons == 1){
                    clickMicrocircleTable('4','2','1')
                }else if(classify == 1 && buttons == 2){
                    clickMicrocircleTable('4','2','2')
                }else if(classify == 1 && buttons == 3){
                    clickMicrocircleTable('4','2','3')
                }else if(classify == 2 && buttons == 0){
                    clickProductTable('3','2','')
                }else if(classify == 2 && buttons == 1){
                    clickProductTable('3','2','1')
                }else if(classify == 2 && buttons == 2){
                    clickProductTable('3','2','2')
                }else if(classify == 2 && buttons == 3){
                    clickProductTable('3','2','3')
                }
            });
            //点击全部评论
            $('#allComment').on('click',function () {
                buttons = 0;
                if(flag && classify == 0){
                    clickCourseUserTable('2','1','');
                }else if(flag && classify == 1){
                    clickMicrocircleUserTable('4','1','');
                }else if(flag && classify == 2){
                    clickProductUserTable('3','1','');
                }else if(!flag && classify == 0){
                    clickCourseTable('2','2','');
                }else if(!flag && classify == 1){
                    clickMicrocircleTable('4','2','');
                }else if(!flag && classify == 2){
                    clickProductTable('3','2','');
                }
            })
            //点击正常评论
            $("#normalComment").on('click',function () {
                buttons = 1;
                if(flag && classify == 0){
                    clickCourseUserTable('2','1','1');
                }else if(flag && classify == 1){
                    clickMicrocircleUserTable('4','1','1');
                }else if(flag && classify == 2){
                    clickProductUserTable('3','1','1');
                }else if(!flag && classify == 0){
                    clickCourseTable('2','2','1');
                }else if(!flag && classify == 1){
                    clickMicrocircleTable('4','2','1');
                }else if(!flag && classify == 2){
                    clickProductTable('3','2','1');
                }
            })
            //点击已拦截评论
            $("#interceptComment").on('click',function () {
                buttons = 2;
                if(flag && classify == 0){
                    clickCourseUserTable('2','1','2');
                }else if(flag && classify == 1){
                    clickMicrocircleUserTable('4','1','2');
                }else if(flag && classify == 2){
                    clickProductUserTable('3','1','2');
                }else if(!flag && classify == 0){
                    clickCourseTable('2','2','2');
                }else if(!flag && classify == 1){
                    clickMicrocircleTable('4','2','2');
                }else if(!flag && classify == 2){
                    clickProductTable('3','2','2');
                }
            })
            //点击已删除评论
            $("#deleteComment").on('click',function () {
                buttons = 3;
                if(flag && classify == 0){
                    clickCourseUserTable('2','1','3');
                }else if(flag && classify == 1){
                    clickMicrocircleUserTable('4','1','3');
                }else if(flag && classify == 2){
                    clickProductUserTable('3','1','3');
                }else if(!flag && classify == 0){
                    clickCourseTable('2','2','3');
                }else if(!flag && classify == 1){
                    clickMicrocircleTable('4','2','3');
                }else if(!flag && classify == 2){
                    clickProductTable('3','2','3');
                }
            })
        }
        //获取课程前台用户评论表
        function clickCourseUserTable(type,userType,status) {
            getCourseUserTable(status);
            useCountTable(type,userType,status);
        }
        //获取课程管理人员评论表
        function clickCourseTable(type,userType,status) {
            getCourseTable(status);
            useCountTable(type,userType,status);
        }
        //获取文章前台用户评论表
        function clickMicrocircleUserTable(type,userType,status) {
            getMicrocircleUserTable(status);
            useCountTable(type,userType,status);
        }
        //获取文章管理人员评论表
        function clickMicrocircleTable(type,userType,status) {
            getMicrocircleTable(status);
            useCountTable(type,userType,status);
        }
        //获取商品前台用户评论表
        function clickProductUserTable(type,userType,status) {
            getProductUserTable(status);
            useCountTable(type,userType,status);
        }
        //获取商品管理人员评论表
        function clickProductTable(type,userType,status) {
            getProductTable(status);
            useCountTable(type,userType,status);
        }
        //调用次数表格
        function useCountTable(type,userType,status) {
            $.ajax({
                url: '/comment/countCommentNum',
                type: 'post',
                dataType: 'json',
                data: {'type':type,'userType':userType,'status': status},
                success: function (dat) {
                    countTable(dat.data);
                }
            })
        }
        //次数表格
        function countTable(data) {
            table.render({
                elem: '#countTable',
                data: data,
                width: 1650,
                cols: [[
                    {field: 'historyNum',title: '历史评论次数',align: 'center',width:411},
                    {field: 'historyPeople',title: '历史评论人数',align: 'center',width:411},
                    {field: 'todayNum',title: '今日评论次数',align: 'center',width:411},
                    {field: 'todayPeople',title: '今日评论人数',align: 'center',width:411}
                ]],
                done: function (res) {
                    $('#allCommentNum').text(res.data[0].allNum);
                    $('#normalCommentNum').text(res.data[0].normalNum);
                    $('#interceptCommentNum').text(res.data[0].interceptNum);
                    $('#deleteCommentNum').text(res.data[0].deleteNum);
                }
            })
        }
        /*——————课程——————*/
        //获取前台用户评论数据
        function getCourseUserTable(status){
            $.ajax({
                url: '/comment/getCourseUserTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        //获取管理人员评论数据
        function getCourseTable(status){
            $.ajax({
                url: '/comment/getCourseTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        /*——————文章——————*/
        //获取前台用户评论数据
        function getMicrocircleUserTable(status){
            $.ajax({
                url: '/comment/getMicrocircleUserTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        //获取管理人员评论数据
        function getMicrocircleTable(status){
            $.ajax({
                url: '/comment/getMicrocircleTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        /*——————商品——————*/
        //获取前台用户评论数据
        function getProductUserTable(status){
            $.ajax({
                url: '/comment/getProductUserTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        //获取管理人员评论数据
        function getProductTable(status){
            $.ajax({
                url: '/comment/getProductTable',
                type: 'post',
                dataType: 'json',
                data: {'status':status},
                success: function (data) {
                    dataTable(data.data);
                }
            })
        }
        //表格渲染
        function dataTable(data) {
            table.render({
                elem: '#dataTable',
                title: '数据列表',
                data: data,
                toolbar: '#table_head',
                limit: 10,
                width: 1650,
                page:{
                    layout:['prev','page','next','skip'],
                    limits:[3,6,9],
                    first:"首页",
                    last:"尾页",
                },
                cols: [[
                    {type:'checkbox',float:'left'},
                    {title:'序号',align:'center',width:100,templet:function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:'account',title:'成员账号',align:'center',width:210},
                    {field:'showName',title:'昵称',align:'center',width:215},
                    {field:'belongName',title:'所属名称',align:'center',width:215},
                    {field:'commentDate',title:'发言时间',align:'center',width:215},
                    {field:'content',title:'发言内容',align:'center',width:216},
                    {field:'status',title:'状态',align:'center',width:210,templet:function (data) {
                            if(data.status == 1){
                                return "正常";
                            }else if(data.status == 2){
                                return '已拦截';
                            }else if(data.status == 3){
                                return '已删除';
                            }else {
                                return '暂无状态';
                            }
                        }},
                    {field:'',title:'操作',align:'center',width:210,templet:function (data) {
                            if(data.status == 1){
                                return '<a onclick="javascript:checkTable('+ data.id +');">查看</a>&nbsp;&nbsp;<a onclick="javascript:interceptTable('+ data.id +","+"'"+data.content+"'" +');">拦截</a>&nbsp;&nbsp;<a onclick="javascript:deleteTable('+ data.id +');">删除</a>'
                            }else if(data.status == 2){
                                return '<a onclick="javascript:checkTable('+ data.id +');">查看</a>&nbsp;&nbsp;<a onclick="javascript:recoverTable('+ data.id +"," +"'"+data.content+"'" +');">恢复</a>&nbsp;&nbsp;<a onclick="javascript:deleteTable('+ data.id +');">删除</a>'
                            }else if(data.status == 3){
                                return '<a onclick="javascript:checkTable('+ data.id +');">查看</a>';
                            }else{
                                return '无操作';
                            }
                        }},
                ]]
            })
        }
        if(classify == 0){
            checkTable = function checkTable(id){
                $.ajax({
                    url: '/comment/getCourseInformation',
                    type: 'post',
                    dataType: 'json',
                    data: {'id':id},
                    success: function (data) {
                        localStorage.setItem('course',JSON.stringify(data.data));
                        layer.open({
                            type:2,
                            title:"课程详情",
                            area:["100%","100%"],
                            Boolean:true,
                            maxmin:true,
                            content:"/comment/coursereview/course-details.html",
                            success: function (layero) {
                                var child = layero.find('iframe').contents();
                                child.find('#parentId').text(id);
                            }
                        })
                    }
                })

            }
        }else if(classify == 1){
            checkTable = function checkTable(id){
                $.ajax({
                    url: '/comment/getMicrocircleInformation',
                    type: 'post',
                    dataType: 'json',
                    data: {'id':id},
                    success: function (data) {
                        localStorage.setItem('microcircle',JSON.stringify(data.data));
                        layer.open({
                            type:2,
                            title:"文章详情",
                            area:["100%","100%"],
                            Boolean:true,
                            maxmin:true,
                            content:"/comment/microcirclereview/microcircle-details.html",
                            success: function () {
                                var child = layero.find('iframe').contents();
                                child.find('#parentId').text(id);
                            }
                        })
                    }
                })
            }
        }else if(classify == 2){
            checkTable = function checkTable(id){
                $.ajax({
                    url: '/comment/getProductInformation',
                    type: 'post',
                    dataType: 'json',
                    data: {'id':id},
                    success: function (data) {
                        localStorage.setItem('product',JSON.stringify(data.data));
                        layer.open({
                            type:2,
                            title:"商品详情",
                            area:["100%","100%"],
                            Boolean:true,
                            maxmin:true,
                            content:"/comment/productreview/product-details.html",
                            success: function (layero,index) {
                                var child = layero.find('iframe').contents();
                                child.find('#parentId').text(id);
                            }
                        })
                    }
                })

            }
        }
        //拦截评论
        interceptTable = function interceptTable(id, content) {
            layer.confirm('您确定要拦截'+ "‘" + content +"’" + "信息吗？",
                function (index) {
                    updateStatus('2',id);
                })
        }
        //恢复评论
        recoverTable = function recoverTable(id, content) {
            layer.confirm('您确定要恢复'+ "‘" + content +"’" + "信息吗？",
                function (index) {
                    updateStatus('1',id);
                })
        }
        //修改评论状态
        function updateStatus(status,id) {
            $.ajax({
                url: '/comment/updateStatus',
                type: 'post',
                dataType: 'json',
                data: {'status':status,'id':id},
                success: function (data) {
                    if(data.data){
                        location.reload();
                    }else {
                        layer.msg('操作失败')
                    }
                }
            })
        }
        //删除
        deleteTable = function deleteTable(id){
            $.ajax({
                url: '/comment/deleteComment',
                type: 'post',
                dataType: 'json',
                data: {'id':id},
                beforeSend: function(){
                    return confirm("确认删除？");
                },
                success: function (data) {
                    if(data.data){
                        location.reload();
                    }
                }
            })
        }
        //刷新
        refresh = function refresh(){
            location.reload();
        }
        //获取今日时间
        function getToday() {
            var myDate = new Date();
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            var date = myDate.getDate();
            var today = year + '-' + month + '-' + date;
            return today;
        }
    });
</script>
</body>
</html>